import React, { Component } from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import { Label,ThemeProvider,Button } from 'iftide';
import Basic from './demo/Basic';
import Basic1 from './demo/Basic1';

export default class Button_Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            theme:"themeB",
            num:0
        }
    }
    componentDidMount(){
        // setInterval(()=>{
        //     let num = this.state.num
        //     this.setState({
        //         theme:num%2==0?"themeA":"themeB",
        //         num:num+1
        //     })
        // },3000)
    }
    onPress1=()=>{
        this.setState({
            theme:"themeA",
        })
    }
    render() {
        return (
            <View style={{height: '100%'}}>
                <ScrollView>
                    <ThemeProvider  theme={this.state.theme}>
                    <Button title={"主要按钮"} size={"normal"} onPress={this.onPress1} hasIcon={true} source={require('./image/Loading.png')} buttonHeight={60}/>
                        <View style={styles.container}>
                            <View style={[styles.label, {backgroundColor: '#F5F7F9'}]}>
                                <Label text = '普通按钮' fontWeight={'bold'} textDecorationLine={'underline'}/>
                            </View>
                            <Basic/>
                            <View style={[styles.label, {backgroundColor: '#F5F7F9'}]}>
                                <Label text = '圆角按钮' fontWeight={'bold'} textDecorationLine={'underline'}/>
                            </View>
                            <Basic1/>
                           
                        </View>
                    </ThemeProvider>
                    
                </ScrollView>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container:{
        flexDirection: 'column',
        flexWrap: 'wrap',
    },
    label: {
        padding: 13,
    },
});
